<template>
  <!-- 发起项目申报 -->
  <div class="initiate_declaration">
    <div class="choose_type" v-if="!isStartedReport">
      <p>选择项目类型</p>
      <div class="btns">
        <div
          v-for="i in TypeList"
          :key="i.key"
          class="item"
          :style="'color:' + i.color + ';background:' + i.bgColor"
        >
          <img v-if="i.key == 1" src="@/assets/static/imgs/type1.png" mode="" />
          <img v-if="i.key == 2" src="@/assets/static/imgs/type2.png" mode="" />
          <img v-if="i.key == 3" src="@/assets/static/imgs/type3.png" mode="" />
          <div class="item_right">
            <span>{{ i.value }}</span>
            <span
              @click="clickItem(i)"
              class="span"
              :style="'background: ' + i.color"
              >去申报</span
            >
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <!-- 按钮 -->
      <div class="container_top">
        <div class="left">
          <i class="el-icon-back" @click="againType"></i>
          <div class="btns_arr dis_center">
            <p
              v-for="(i, index) in btnArr"
              :key="index"
              @click="clickBtnArr(index)"
              :class="current == index ? 'isActive' : ''"
            >
              <span>{{ i.text }}</span>
            </p>
          </div>
        </div>
        <div class="right" v-if="isStartedReport && showZhi && isStart">
          <div class="right_left dis_center">
            <img
              src="@/assets/static/imgs/01.png"
              @click="showOpenList"
              style="cursor: pointer"
            />
            {{ title }}
          </div>
          <div class="right_right" @click="toReport">去申报</div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="container_bottom">
        <div class="table_top dis_center p_lr_20">
          <el-button type="primary" @click="createReport">新建申报</el-button>
          <div v-show="current == 0">
            <span style="margin-right: 10px">状态</span>
            <el-select
              v-model="statusValue"
              placeholder="全部"
              @change="selectStatus"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <component
        :is="componentName"
        :listLoading="listLoading"
        :projectlistArr="projectlistArr"
        :current="current"
        :isKeGuan="isKeGuan"
        @delProjectFn="delProjectFn"
      ></component>

      <!-- 对话框 -->

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getProjectList"
      />
    </div>
    <el-dialog
      title="开放申报列表"
      :visible.sync="isShowOpen"
      width="66%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-table
        v-loading="listLoading"
        :data="openList"
        border
        stripe
        fit
        highlight-current-row
        :header-cell-style="{ background: '#ECF1F9', color: '#000' }"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50px"
          align="center"
        />

        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.reportName ? scope.row.reportName : "--" }}
          </template>
        </el-table-column>

        <el-table-column label="发布时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.updateTime ? scope.row.updateTime : "--" }}
          </template>
        </el-table-column>

        <el-table-column label="年度" align="center">
          <template slot-scope="scope">
            {{ scope.row.year ? scope.row.year : "--" }}
          </template>
        </el-table-column>

        <el-table-column label="开始时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.startTime ? scope.row.startTime : "--" }}
          </template>
        </el-table-column>

        <el-table-column label="截止时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.endTime ? scope.row.endTime : "--" }}
          </template>
        </el-table-column>

        <el-table-column label="申报状态" align="center">
          <el-tag type="success">进行中</el-tag>
        </el-table-column>

        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.note ? scope.row.note : "--" }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import ZiLiTable from "./selfProject/listTable.vue"; // 自立项目的table
import OtherTable from "./outsideProject/listTable.vue"; // 其他项目的table

import {
  apiTypeList, //获取项目类型列表
  apiIsStartedReport, //自立项目是否开启申报
  apiProjectList, //根据选择的key，获取项目列表
  apiDraftList, // 11 草稿箱
  apiDeleteProject, // 13 删除项目
  // apiProjectProcess, // 17 查询项目流程
  apiOpenReportList, // 获取当前正在进行的开放申报列表
} from "@/api2/projectManagement/reporting";

export default {
  components: {
    ZiLiTable,
    OtherTable,
  },
  name: "initiateDeclaration",
  data() {
    return {
      openList: [],
      isShowOpen: false,
      step_1: require("@/assets/static/imgs/step_1.png"),
      step_2: require("@/assets/static/imgs/step_2.png"),
      step_3: require("@/assets/static/imgs/step_3.png"),
      step_4: require("@/assets/static/imgs/step_4.png"),
      step_5: require("@/assets/static/imgs/step_5.png"),
      statusValue: "",
      componentName: "",
      current: 0, // 草稿还是列表
      btnArr: [
        {
          index: 0,
          text: "申报",
        },
      ],
      imgArr: [
        "~@/src/assets/static/imgs/type1.png",
        "~@/src/assets/static/imgs/type2.png",
        "~@/src/assets/static/imgs/type3.png",
      ],
      isKeGuan: false,
      options: [
        {
          value: "0",
          label: "未提交",
        },
        {
          value: "1",
          label: "待审核",
        },
        {
          value: "2",
          label: "审核中",
        },
        {
          value: "3",
          label: "已审核",
        },
      ],
      value: "",
      projectlistArr: [], //项目列表
      listLoading: false,
      chooseItemType: {},
      title: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: null,
        projectCategory: 0,
      },

      total: 0,
      listTotal: 0,
      TypeList: [],
      isStartedReport: false,
    };
  },
  computed: {
    isStart() {
      return this.$store.state.project.projectInfo.isStart;
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.isKeGuan =
        JSON.parse(sessionStorage.getItem("loginUserinfo")).name == "科研管理员"
          ? true
          : false;
      this.getApiTypeList();
    },
    handleClose() {
      this.isShowOpen = false;
    },
    // 点击喇叭，显示开放申报列表数据
    showOpenList() {
      apiOpenReportList()
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.isShowOpen = true;
            this.openList = res.data;
          } else {
            this.msgError("请求失败");
          }
        })
        .catch((err) => {
          console.log(res);
          this.msgError("请求失败");
        });
    },

    // 删除草稿内容
    delProjectFn(id) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          apiDeleteProject(id)
            .then((res) => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getDraftList();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            })
            .catch();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    selectStatus(e) {
      this.queryParams.status = e;
      this.getProjectList();
    },

    clickBtnArr(index) {
      if (this.current != index) {
        if (index == 0) {
          this.getProjectList();
        } else {
          this.getDraftList();
        }
      }
      this.current = index;
    },

    // 新建项目申报
    createReport() {
      // this.$store.dispatch("project/setProcessList", []);
      this.$store.dispatch("project/SetIsSeeProcess", false);
      this.$store.dispatch("project/setNewPeo", true);
      this.$store.dispatch("project/showDengJiFn", false);

      // 1 自立项目(内部) 2 横向项目(外部) 3 纵祥项目(外部)
      if (this.chooseItemType.key === 1) {
        this.$router.push("/projectManagement/selfProject");
      } else {
        this.$router.push("/projectManagement/outsideProject");
      }
    },

    // 重新选择项类型
    againType() {
      this.isStartedReport = false;
    },

    // 去申报自立项目
    toReport() {
      this.$store.dispatch("project/setNewPeo", true);
      this.showZhi = false;
      this.$router.push("/projectManagement/selfProject");
    },

    // 获取数据列表
    getProjectList() {
      this.listLoading = true;
      apiProjectList(this.queryParams).then((res) => {
        this.projectlistArr = res.data;
        this.listLoading = false;
        this.total = res.total;
      });
    },

    // 草稿箱数据
    getDraftList() {
      let projectCategory = this.queryParams.projectCategory;
      apiDraftList(projectCategory)
        .then((res) => {
          this.projectlistArr = res.data;
          this.listLoading = false;
          this.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 选择类别
    clickItem(item) {
      this.chooseItemType = item;
      this.queryParams.projectCategory = item.key;
      this.$store.dispatch("project/changeEdit", false);

      this.getProjectList();
      this.$store.commit("project/SAVE_KEY", item.key);
      sessionStorage.setItem("itemKey", item.key);

      this.$store.commit("project/SET_TYPENAME", item.value);
      sessionStorage.setItem("typeName", item.value);

      if (item.key == 1) {
        this.componentName = "ZiLiTable";
        this.btnArr.push({
          index: 1,
          text: "草稿",
        });
        apiIsStartedReport()
          .then((res) => {
            if (res.code == 0) {
              this.title = "自立项目申报已开始";
              this.$store.dispatch("project/changeProjectIsStart", true);
              sessionStorage.setItem("isStart", true);
            } else {
              this.title = "自立项目申报未开始";
              this.$store.dispatch("project/changeProjectIsStart", false);
              sessionStorage.setItem("isStart", false);
            }
          })
          .catch((err) => {
            this.$store.dispatch("project/changeProjectIsStart", false);
            sessionStorage.setItem("isStart", false);
          });
      } else {
        this.btnArr = [
          {
            index: 0,
            text: "申报",
          },
        ];
        this.componentName = "OtherTable";
        this.$store.dispatch("project/changeProjectIsStart", false);
        sessionStorage.setItem("isStart", false);
      }
      this.isStartedReport = true;
      this.showZhi = true;
    },

    // 获取项目类别
    getApiTypeList() {
      apiTypeList()
        .then((res) => {
          if (res.code == 0) {
            this.TypeList = res.data.map((v) => {
              return {
                key: v.key,
                value: v.value,
              };
            });
            this.TypeList[0].color = "#3B95FF";
            this.TypeList[0].bgColor = "#E7F2FF";

            this.TypeList[1].color = "#7075EC";
            this.TypeList[1].bgColor = "#E7EBFF";

            this.TypeList[2].color = "#45B177";
            this.TypeList[2].bgColor = "#E3F4EB";
          } else {
            this.TypeList = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.TypeList = [];
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.dis_center {
  display: flex;
  align-items: center;
}
.p_lr_20 {
  padding: 0 20px;
}
.isActive {
  color: #0b847b;
  border-bottom: 2px solid #0b847b;
}

.initiate_declaration {
  background: rgba(11, 132, 123, 0.1);
  padding: 16px;
  position: relative;
  height: 100%;
  .choose_type {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: #0b847b;
    .bg1 {
      background: url("~@/assets/static/imgs/type1.png");
    }
    .bg2 {
      background: url("~@/assets/static/imgs/type2.png");
    }
    .bg3 {
      background: url("~@/assets/static/imgs/type3.png");
    }
    p {
      position: absolute;
      left: 16px;
    }
    .btns {
      display: flex;
      position: absolute;
      left: 16px;
      top: 80px;
      .item {
        width: 300px;
        height: 140px;
        border-radius: 10px 10px 10px 10px;
        overflow: hidden;
        margin-right: 1.25rem;
        display: flex;
        align-items: center;

        img {
          flex: 1;
        }
        .item_right {
          flex: 1;
          text-align: center;
          height: 60%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          span {
            width: 100%;
            display: block;
          }
          .span {
            cursor: pointer;
            font-size: 14px;
            color: #fff;
            width: 80px;
            height: 32px;
            line-height: 32px;
            margin: 0 auto;
            border-radius: 50px 50px 50px 50px;
          }
        }
      }
    }
  }

  .container_top {
    width: 100%;
    height: 50px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);

    // height: 50px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;

    margin-bottom: 13px;
    .left {
      display: flex;
      align-content: center;
      .el-icon-back {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        margin-right: 16px;
        cursor: pointer;
      }
      .btns_arr {
        p {
          line-height: 100%;
          padding-bottom: 10px;
          cursor: pointer;
          margin-right: 20px;
        }
      }
    }
    .right {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 500px;
      height: 32px;
      line-height: 32px;
      background: #ffece5;
      border-radius: 4px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      .right_left {
        color: #ef7045;
        margin-left: 20px;

        img {
          margin-right: 20px;
        }
      }
      .right_right {
        cursor: pointer;
        text-align: center;
        width: 60px;
        height: 32px;
        background: #ef7045;
        color: #fff;
      }
    }
  }
  .container_bottom {
    width: 100%;
    background: #ffffff;
    .table_top {
      height: 70px;
      justify-content: space-between;
    }
  }
}
</style>
